import { Input,Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chart-scatter-diagram',
  templateUrl: './chart-scatter-diagram.component.html',
  styleUrls: ['./chart-scatter-diagram.component.css']
})
export class ChartScatterDiagramComponent implements OnInit {
  @Input() data: any;
  @Input() title: string;
  public chartOptions

  public componentName:string="standardPowerUtilizationRate";

  ngOnInit() {
    this.chartOptions ={
      chart: {
        type: 'scatter',
        zoomType: 'xy'
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      title: {
        text: this.title,
        margin: 50
      },
      xAxis: {
        title: {
          enabled: false
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true,
        lineWidth:2,
        labels: {
          enabled: false
        },
        tickWidth: 0,
        gridLineWidth: 0
      },
      yAxis: {
        title: {
          text: ''
        },
        lineWidth:2,
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        valueSuffix: '单位'
      },
      legend: {
        align: 'left',
        verticalAlign: 'bottom',
        x:100,
        y:0,
        itemWidth:100,
        borderWidth: 0,
        maxHeight:40,
        margin:20,
        navigation:{
          activeColor:'#3e82ed',
          arrowSize:13,
          style: {
            fontWeight: 'bold',
            color: '#333',
            fontSize: '13px'
          }
        }
      },
      plotOptions: {
        scatter: {
          marker: {
            radius: 5,
            states: {
              hover: {
                enabled: true,
                lineColor: 'rgb(100,100,100)'
              }
            }
          },
          states: {
            hover: {
              marker: {
                enabled: false
              }
            }
          },
          tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x} 单位, {point.y} '
          }
        }
      },
      series: this.data
    }
  }


}
